<template>
  <div class="payment-success">
    <el-container>
      <el-main>
        <div class="success-content">
          <div class="success-icon">
            <el-icon size="120" color="#67c23a">
              <CircleCheckFilled />
            </el-icon>
          </div>

          <h1 class="success-title">支付成功</h1>
          <p class="success-message">恭喜您，订单支付成功！我们会尽快为您发货</p>

          <div class="order-info">
            <el-card class="order-card">
              <template #header>
                <span>订单信息</span>
              </template>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="订单号">
                  {{ orderInfo.orderNumber }}
                </el-descriptions-item>
                <el-descriptions-item label="支付金额">
                  <span class="amount">¥{{ orderInfo.amount }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  {{ orderInfo.paymentMethod }}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间">
                  {{ formatDate(orderInfo.payTime) }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>

          <div class="success-actions">
            <el-button type="primary" size="large" @click="viewOrder"> 查看订单 </el-button>
            <el-button size="large" @click="goHome"> 继续购物 </el-button>
          </div>

          <div class="next-steps">
            <h3>接下来您可以：</h3>
            <ul>
              <li>在"我的订单"中查看订单状态</li>
              <li>关注物流信息，及时收货</li>
              <li>收到商品后，记得确认收货</li>
              <li>对商品满意的话，别忘了给个好评</li>
            </ul>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { CircleCheckFilled } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const orderInfo = ref({
  orderNumber: '',
  amount: 0,
  paymentMethod: '',
  payTime: new Date(),
})

// 方法
const loadOrderInfo = () => {
  // 从路由参数或查询参数中获取订单信息
  const orderId = route.query.orderId
  const orderSn = route.query.orderSn  // 获取完整的订单编号
  const amount = route.query.amount

  // 优先使用完整的订单编号，如果没有则用orderId构造
  if (orderSn) {
    orderInfo.value.orderNumber = orderSn as string
  } else if (orderId) {
    orderInfo.value.orderNumber = `ORD${orderId}`
  }

  if (amount) {
    orderInfo.value.amount = Number(amount)
  }

  // 设置支付方式（可以从路由参数获取）
  orderInfo.value.paymentMethod = (route.query.paymentMethod as string) || '在线支付'
  orderInfo.value.payTime = new Date()
}

const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

const viewOrder = () => {
  const orderId = route.query.orderId
  if (orderId) {
    router.push(`/order/${orderId}`)
  } else {
    router.push('/orders')
  }
}

const goHome = () => {
  router.push('/')
}

// 组件挂载时加载数据
onMounted(() => {
  loadOrderInfo()
})
</script>

<style scoped>
.payment-success {
  min-height: 100vh;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.el-container {
  width: 100%;
  max-width: 1200px;
}

.el-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0;
}

.success-content {
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.success-icon {
  margin-bottom: 24px;
}

.success-title {
  font-size: 36px;
  font-weight: 700;
  color: #67c23a;
  margin: 0 0 16px 0;
}

.success-message {
  font-size: 18px;
  color: #606266;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.order-info {
  margin-bottom: 32px;
}

.order-card {
  max-width: 600px;
  margin: 0 auto;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.amount {
  font-size: 18px;
  font-weight: 600;
  color: #e6a23c;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
}

.next-steps {
  text-align: left;
  background: #f8fafc;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  max-width: 600px;
  margin: 0 auto;
}

.next-steps h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
}

.next-steps ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
  line-height: 1.8;
}

.next-steps li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .payment-success {
    padding: 10px;
  }
  
  .success-content {
    padding: 30px 15px;
    margin: 10px;
  }

  .success-title {
    font-size: 28px;
  }

  .success-actions {
    flex-direction: column;
    align-items: center;
  }

  .success-actions .el-button {
    width: 200px;
  }
  
  .order-card {
    margin: 0 10px;
  }
  
  .next-steps {
    margin: 0 10px;
  }
}

@media (max-width: 480px) {
  .success-content {
    padding: 20px 10px;
  }
  
  .success-title {
    font-size: 24px;
  }
  
  .success-message {
    font-size: 16px;
  }
}
</style>
